<template>

    <div class="form">
        <div class="form-group">
            <input type="text" class="form-control" v-model = "phone" @change="phoneValidate" :placeholder="placeHolder">
        </div>
        <div class="form-group txt"  :class='{"hide-element": passwordLogin }'>
            <input type="text" v-model = "ValidateInfo" class="form-control"  placeholder="请输入短信验证码">
            <span @click="getValidate">获取验证码</span>
        </div>
        <div class="form-group" :class='{"hide-element": path }'>
            <input type="password" v-model = "password" @change="passwordValidate" class="form-control" placeholder="请输入密码">
        </div>
        <div class="m-nerror" :class='{"hide-element": PhoneErr }'>
            <span class="ferrortail">
            </span>
            <span class="ferrorhead">{{ErrInfo}}</span>
        </div>
        <div class="m-nerror" :class='{"hide-element": PasswordErr }'>
            <span class="ferrortail">
            </span>
            <span class="ferrorhead">密码格式错误</span>
        </div>
        <div class="m-nerror" :class='{"hide-element": confirmRegister }'>
            <span class="ferrortail">
            </span>
            <span class="ferrorhead">{{phoneInfo}}</span>
        </div>
        <button class="toform" @click="confrimFrom">{{buttonInfo}}</button>
    </div>

    
</template>
<script>

export default {

    data(){
        return {
            phone: '',
            password: "",
            PhoneErr: true,
            PasswordErr: true,
            ValidateInfo: "",
            confirmRegister: true
        }
       
    },
  
    methods: {
        phoneValidate(){
            let path = this.$route.path
            var _this = this

            var reg = /^1[3-9]\d{9}$/
            var res = reg.test(_this.phone)
                // debugger
            if(path=="/phonelogin"){

                return res?_this.PhoneErr = true:_this.PhoneErr = false
    
            }else if(path=="/passwordlogin" ){
            
                  if(!_this.PasswordErr){
                    _this.PasswordErr =!_this.PasswordErr
                    return res?_this.PhoneErr = true:_this.PhoneErr = false
                }
            }else if(path=="/emaillogin" || path=="/register"){

                let reg2 = /^\w{6,16}@\w{2,}\..{2,}$/;
                let res2 = reg2.test(_this.phone)
                return res?_this.PhoneErr = true:_this.PhoneErr = false
       
            }
            
        },
        emailValidate(){
            let reg = /^\w{6,16}@\w{2,}\..{2,}$/;
            let res = reg.test(this.phone)
            return res?this.email = true:this.email = false
       
        },
        passwordValidate(){
            var reg = /^\w{6,16}$/;
            let res = reg.test(this.password)
            if(this.PhoneErr){
                return res?this.PasswordErr = true:this.PasswordErr = false
            }    

        },
        getValidate(){
            var validate="";
            function getRanNum(min, max) {
                return Math.floor(Math.random() * (max - min)) + min;
            }
            for(var i =0;i<6;i++){
                validate += String.fromCharCode(getRanNum(48,58));
            }
            this.ValidateInfo = validate
    
        },
        confrimFrom(){

            let path = this.$route.path
            let guest = {}
            let guestArr = []
            guest.phone = this.phone
            guest.password = this.password
            let storageInfo = JSON.parse(localStorage.getItem("guest"))

            if(path=="/register" ){
                if(this.PhoneErr && this.password && this.ValidateInfo){
                        //将密码存在localStorage中，模拟存数据库
                 
                    //判断用户名是否存在
                
                    if(!storageInfo){
   
                        guestArr.push(guest);
                        localStorage.setItem("guest",JSON.stringify(guestArr))
                  
                    }else{

                        var index = storageInfo.findIndex(item =>{
                            return item.phone == guest.phone
                        })

                        if(index == -1){
                            storageInfo.push(guest);
                          
                            localStorage.setItem("guest",JSON.stringify(storageInfo))
                            
                            let newPath = "/mainPage?phone="+guest.phone
                
                            this.$router.push(newPath)
                            this.confirmRegister = !this.confirmRegister

                        }else{
                            //-1代表重名了
                            // console.log("重名",-1)
                            this.phone = ""
                            this.password =""
                            this.ValidateInfo=""
                            this.confirmRegister = !this.confirmRegister
                  
                           
                        }
                    
                    }

                }
             
                        
            }else if(path=="/phonelogin" ){
                
                if(this.PhoneErr &&  this.ValidateInfo){
                        let index = storageInfo.findIndex(item =>{
                            return item.phone == guest.phone
                        })

                        if(index == -1){
                            this.phone = ""
                            this.ValidateInfo=""
                            this.confirmRegister = !this.confirmRegister

                       
                        }else{

                            let newPath = "/mainPage?phone="+guest.phone
                            this.$router.push(newPath)
                        
                        }
                }
            }else if(path=="/passwordlogin" ){
                
                if(this.PhoneErr && this.password){
                        let index = storageInfo.findIndex(item =>{
                            return item.phone == guest.phone
                        })

                       
                        if(index != -1 && storageInfo[index].password == guest.password){

                            let newPath = "/mainPage?phone="+guest.phone
                            this.$router.push(newPath)
                        
                        }else{
                             this.phone = ""
                            this.ValidateInfo=""
                            this.confirmRegister = !this.confirmRegister
                        }
                }
            }
 
       
        }
    },
    computed: {
        path(){
            let path = this.$route.path
            if(path=="/phonelogin" ){
                return true
            }else{
                return false
            }
        },
        passwordLogin(){
            let path = this.$route.path
            if(path=="/passwordlogin" || path=="/emaillogin" ){
                return true
            }
        },
        placeHolder(){
            let path = this.$route.path
            if(path=="/emaillogin"){
                return "网络邮箱账号"
            }else{
                return "请输入手机号"
            }
        },
        buttonInfo(){
            let path = this.$route.path
            if(path=="/register"){
                return "注 册"
            }else{
                return "登 录"
            }
        },
        phoneInfo(){
            let path = this.$route.path
            if(path=="/register"){
                return "手机号已被注册"
            }else if(path=="/phonelogin"){
                return "手机号未注册,请先注册"
            }else if(path=="/passwordlogin"){
                return "登陆失败,请重新登录"
            }
        },
        ErrInfo(){
            let path = this.$route.path
            if(path=="/emaillogin"){
                return "邮箱格式错误"
            }else{
                return "手机号格式错误"
            }
        }

    }
}
</script>

<style lang="stylus" scoped>
    .form
        padding .3rem .15rem 0
        
        input
            box-sizing border-box
            height .44rem 
            padding .12rem .4rem .12rem .1rem
            line-height .2rem
            border-radius 0
            font-size .14rem
            background-color #f7f7f7
            border 0
            outline 0
            box-shadow none
            &:focus 
                outline none
                outline-offset 0
                box-shadow none
            &:active
                box-shadow none
        .txt
            display flex
            input 
                flex 1
            span
                display block
                width 1.03rem
                height .42rem
                line-height .42rem
                color #333
                background #fff
                border 1px solid #ccc
                margin-left .1rem
                font-size .14rem
                text-align center
                &:focus
                    outline none
        .toform
            width 100%
            height .45rem
            background #000
            color #fff
            font-weight  bold
            outline none 
            border 0
            font-size .15rem
            &:hover
                background #000
                color #fff
        .hide-element
            display none
        .hide-element2
            display none
        .m-nerror
            color #fa5b5b
            line-height .2rem
            height .2rem
            margin-bottom .05rem
            .ferrortail
                display inline-block
                height .15rem
                width .18rem
                background: url("https://m.kaola.com/res/images/login/ursicon4.png") -999px -999px no-repeat;
                background-size: .21rem
                background-position  0 -1.49rem
                vertical-align  middle
 
</style>